<!--
 * @Descripttion: 
 * @version: 
 * @Author: Jf W
 * @Date: 2021-08-11 10:58:25
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-08-24 15:45:45
-->
<template>
  <div>
    <HeaderTopVue></HeaderTopVue>
    <div class="container">
      <LeftNavigationVue class="left-nav"></LeftNavigationVue>
      <div class="right-content">
        <!-- <div class="top">保险产品</div>
        <div class="content"></div> -->
        <VisaList></VisaList>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import HeaderTopVue from '../../components/common/headerTop/HeaderTop.vue'
import LeftNavigationVue from '../../components/common/leftNav/LeftNavigation.vue'
import VisaList from '../visaSource/VisaList.vue'

export default defineComponent({
components: {
  HeaderTopVue,
  LeftNavigationVue,
  VisaList
}
})

</script>

<style lang="scss" scoped>
.container {
  background-color: #F0F3EF;
  // padding-left: 10%;
  display: grid;
  grid-template-columns: 25% 75%;
  .left-nav {
    display: grid;
    justify-items: right;
    padding-right: 40px;
  }
  .top {
    width: 77%;
    height: 40px;
    line-height: 40px;
    padding-left: 20px;
    margin-top: 10px;
    font-size: 14px;
    background-color: #fff;
  }
  .content {
    margin-top: 10px;
    width: 77%;
    height: 550px;
    background-color: #fff;
    z-index: 999;
    margin-bottom: 30px;
  }

  .right-content {
    width: 93%;
  }
}
</style>